<template>
  <!-- 
    组件需要提供的功能：
    1、slot
    2、对外提供数据 -> 滑动的方向
 -->
  <view @touchstart="handleTouchstart" @touchend="handleTouchend">
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 按下屏幕的时间
      startTime: 0,
      // 按下屏幕的坐标
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    /* 用户按下屏幕 */
    handleTouchstart(event) {
      // console.log("按下了屏幕");
      this.startTime = Date.now();
      // 屏幕按下去的坐标
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    /* 用户离开屏幕 */
    handleTouchend(event) {
      // console.log("离开了屏幕");
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;


      // 判断按下的时长(以时间戳计算 1000等于1s)
      if (endTime - this.startTime > 2000) {
        retrun;
      }

      // 滑动的方向(变量)
      let direction = "";

      // 判断用户滑动的距离(单位为像素)是否合法。如果合法再判断滑动的方向(注意距离需要加上绝对值)
      if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10) {
        // 判断滑动方向
        direction = endX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }

      // 到这里表示，用户做了合法的滑动操作
      console.log("debug => ", direction);

      // 对外提供数据(滑动的方向) 子组件向父组件传递
      this.$emit("swiperAction",{direction:direction});
    },
  },
};
</script>

<style lang="scss">
</style>